<template>
  <f7-page>
    <!-- <f7-navbar :sliding="false">
      <f7-nav-left>
        <f7-link back icon-material="arrow_back"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>日期选择</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar> -->
    <f7-user-navbar title="日期选择"></f7-user-navbar>

    <f7-row class="bottom-choice row" style="position">
      <div class="col" @click="openPicker('pickerRef')">
        <img src="../../../assets/img/component/bottom-date.png" alt width="22px" />
        &nbsp;{{search.year}}年{{search.month}}月
        <f7-icon material="expand_more"></f7-icon>
        <f7-date-picker
          :options="dateOptionsEmpty"
          ref="pickerRef"
          :withMonth="true"
          :value="[search.year, search.month]"
          @submit="pickerSearch"
        ></f7-date-picker>
      </div>
      <div class="col" @click="openPicker('pickerRef2')">
        <img src="../../../assets/img/component/bottom-date.png" alt width="22px" />
        &nbsp;{{search$2.year}}年
        <f7-icon material="expand_more"></f7-icon>
        <f7-date-picker
          :options="dateOptionsEmpty"
          ref="pickerRef2"
          :withMonth="false"
          :value="[search$2.year]"
          @submit="pickerSearch"
        ></f7-date-picker>
      </div>
    </f7-row>
  </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";

export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      query: [],
      model: []
    };
  }

  mixin() {
    return {
      data() {
        return {
          search: {
            year: 2020,
            month: 6
          },
          search$2: {
            year: 2020
          },
          dateOptions: [
            { key: "2020", value: [1, 2, 3] },
            { key: "2019", value: [1, 2, 3] },
            { key: "2018", value: [1, 2, 3] }
          ],
          dateOptionsEmpty: [],
          dateOptionsNoMonth: [
            { key: "2020年度", value: 2020 },
            { key: "2019年度", value: 2019 },
            { key: "2018年度", value: 2018 }
          ]
        };
      },
      methods: {
        pickerSearch(retVals) {
          console.log(retVals);
          if (retVals.length == 1) {
            this.search$2.year = retVals[0];
          } else {
            this.search.year = retVals[0];
            this.search.month = retVals[1];
          }
        },
        openPicker(ref) {
          let picker = this.$refs[ref].picker;
          if (picker && !picker.opened) {
            picker.open();
          }
        }
      },
      computed: {},
      mounted() {}
    };
  }
}
</script>

<style scoped>
.bottom-choice {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 44px;
  background: #ffffff;
  line-height: 44px;
  font-size: 16px;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 100;
  left: 0;
}
.bottom-choice::before {
  content: "";
  position: absolute;
  background-color: #ddd;
  display: block;
  z-index: 15;
  bottom: auto;
  top: 0;
  right: auto;
  left: 0;
  height: 1px;
  width: 100%;
  transform-origin: 50% 100%;
  webkit-transform-origin: 50% 100%;
  transform: scaleY(0.33);
}
.bottom-choice .col {
  text-align: center;
}
.bottom-choice .col img {
  vertical-align: middle;
  margin-top: -5px;
}
</style>
